<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cute girl</title>
    <style>
        * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	transition: 5.00s ease;
}
body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	gap: 1rem;
	background: #eeba3f;
}
#grid {
	width: calc(100% - 20vmin);
	aspect-ratio: 4/11;
	background: linen;
	display: grid;
	grid-template-columns: 1fr 0fr 1fr;
	place-items: center;
	outline: 2px solid #804a00;
	border-radius: 5vmin;
	box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
	overflow: hidden;
}
.left,
.right,
.middle {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transform-origin: center;
}
.left {
	background-image: url("./left1.jpg");
	border-right: 1px solid #dd9026;
}
.middle {
	font-size: 0rem;
	background-image: url("./middle1.jpg");
}
.right {
    background-image:url("./right1.jpg");
	border-left: 1px solid #e1dc37;
}

#grid:hover {
	grid-template-columns: 1fr 1fr 1fr;
}
    </style>
</head>
<body>
    <div id="grid">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
	<a>cute</a>
</body>
</html>